<script setup lang="ts">
import { ref, toRef } from "vue";

type Prop = {
  label: string;
  value: string;
  autoClear?: boolean;
  base64?: boolean; // value 是否需要base64编码,显示是解码
};

const props = defineProps<Prop>();
const emit = defineEmits(["change"]);
const dialogVisible = ref(false);

const fLabel = ref(props.label || "");
const fValue = ref(props.base64 ? atob(props.value || "") : props.value || "");

const open = () => {
  dialogVisible.value = true;
};

const close = () => {
  dialogVisible.value = false;
  if (props.autoClear) {
    fLabel.value = "";
    fValue.value = "";
  }
};

const onSave = () => {
  emit(
    "change",
    fLabel.value,
    props.base64 ? btoa(fValue.value) : fValue.value
  );
  close();
};
</script>

<template>
  <div>
    <slot :open="open" :close="close" />
    <el-dialog v-model="dialogVisible" width="60%">
      <el-form label-position="top">
        <el-form-item label="Key">
          <el-input v-model="fLabel" />
        </el-form-item>

        <el-form-item label="Value">
          <el-input v-model="fValue" type="textarea" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div>
          <el-button type="primary" icon="Select" @click="onSave">
            保存
          </el-button>
          <el-button icon="CloseBold" @click="close">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped></style>
